import React, { memo, useEffect, useState, useMemo, useCallback } from "react";
import sty from "./sty.module.css";
import NavBar from "@/components/NavBar";

import HeaderInfo from "@/components/HeaderInfo";
import { useSelector } from "react-redux";

import SongList from "@/components/SongList";
import { reqAlbum } from "../../api/album";
import { shallowEqual } from "react-redux";
import Scroll from "../../components/scroll";
import { createMarkup } from "@/utils/util";
import { Tabs } from "antd-mobile";
import { albumTabs } from "../../constans";
import { getCurSong } from "@/store/actionCreator";
import { useDispatch } from "react-redux";
const Album = (props) => {
  console.log(props);
  const [songs, setSongs] = useState([]);
  const [album, setAlbum] = useState({});
  const dispatch = useDispatch();
  const { match } = props;
  const { playList, curSong } = useSelector(
    (state) => ({
      playList: state.getIn(["playList"]),
      curSong: state.getIn(["curSong"]),
    }),
    shallowEqual
  );
  useEffect(() => {
    const id = match.params.id;
    reqAlbum(id).then((res) => {
      console.log(res);
      if (res.code === 200) {
        let album = res.album;
        const info = {
          coverImgUrl: album.blurPicUrl,
          description: album.description,
          name: album.name,
          updateTime: album.publishTime,
          creator: {
            nickname: album.artist && album.artist.name,
            avatarUrl: album.artist && album.artist.picUrl,
          },
        };
        setAlbum(info);
        setSongs(res.songs);
      }
    });
  }, [match]);
  const albumInfo = useMemo(() => album, [album]);
  const curSongId = useMemo(() => curSong.id, [curSong]);
  const songsList = useMemo(() => songs, [songs]);

  const onSelectSong = useCallback(
    (id) => {
      dispatch(getCurSong(id));
    },
    [dispatch]
  );
  const h = playList.length ? 60 : 0;
  const height = { height: `100vh - ${290 + h}px` };
  return (
    <div className="page">
      <NavBar>专辑</NavBar>
      <HeaderInfo info={albumInfo} />
      <Tabs tabs={albumTabs} swipeable={false}>
        <div style={height}>
          <SongList
            list={songsList}
            onSelectSong={onSelectSong}
            currentSongId={curSongId}
          />
        </div>
        <div style={height}>
          <Scroll>
            <div
              className={sty.desc}
              dangerouslySetInnerHTML={createMarkup(album.description)}
            ></div>
          </Scroll>
        </div>
      </Tabs>
    </div>
  );
};
export default memo(Album);
